<script setup lang="ts">
import {ref} from "vue";

const dialogVisible = ref(false);

const text = ref();

const acceptParams = (params: any): void => {
  dialogVisible.value = true;
  text.value = params.text;
};
defineExpose({
  acceptParams
});
</script>

<template>
  <div class="myShowDialog">
    <el-dialog
      v-model="dialogVisible"
      width="30%"
    >
      <div class="my_header_dia_body">
        <div class="show_html">
          <div v-html="text"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.myShowDialog {

  :deep(.el-dialog__header) {
    padding: 0;
    background: #112a38;
  }

  :deep(.el-dialog__body) {
    padding: 5vh 1vw 1.9vh;
    background: #112a38;
  }
}

.my_header_dia_body::-webkit-scrollbar {
  display: none;
}

.my_header_dia_body {
  background: transparent;
  max-height: 60vh;
  overflow: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  padding: 2.39vh 1.21vw;

  .show_html {
    color: #ffffff !important;

    :deep(p) {
      font-size: 0.84vw !important;
      line-height: 1.6;
      //text-indent: 2em;
      span {
        font-size: 0.84vw !important;
        line-height: 1.6;
      }
    }

    :deep(._135editor) {
      section {
        p {
          color: #ffffff !important;
        }

        span {
          color: #ffffff !important;
        }
      }
    }

    :deep(.policy_top_right_header) {
      margin-bottom: 2vh;

      img {
        width: 1.05vw;
        height: 2.29vh;
        margin-right: 1.15vw;
        vertical-align: middle;
      }

      span {
        font-size: 0.84vw;
        font-weight: bold;
        color: #ffffff;
        vertical-align: middle;
      }
    }

    :deep(.policy_top_right_body) {
      text-indent: 2em; /* 首行缩进2格 */
      color: #ffffff;
      line-height: 1.5;
      margin-bottom: 2vh;
    }

    :deep(.head) {
      width: 15vw;
      height: 4.5vh;
      line-height: 1.5;
      color: #ffffff;
      font-weight: bold;
      font-size: 0.84vw;
      padding-left: 1vw;
      // text-align: center;
      background: linear-gradient(90deg, #ff4c4c 0%, rgba(255, 76, 76, 0) 100%);
      margin-top: 1vh;
    }

    :deep(.content) {
      color: #ffffff;
      font-size: 0.84vw;
      line-height: 1.5;
      margin-top: 2vh;
      text-indent: 2em;
    }
  }
}

</style>
